<template>
    <div class="cls1" ref="chartSC"></div>
  </template>
  
  <script setup>
  import * as echarts from 'echarts'
  import { onMounted, useTemplateRef, ref } from 'vue';
  // 不同价位排行
  import request from '../axios/request'
  const chartSC = ref()
  
  function chartsInit(data) {
      var x = [];
      var y= [];
      
      for (var i = 0; i < data.length; i++) {
          x.push(data[i].name);
          y.push(data[i].value);
      }
    
      var myChart = echarts.init(chartSC.value, 'Light');
      var option;

    
     
      option = {
        title: {
  text: '不同价格所占销售量的百分比',
  textStyle: {
    color: '#90E2FF',
    fontSize: 18,
    textAlign: 'center'
  },
  left: 'center',
  top: '6%'
},
        grid: {
            left: '10%',
            right: '10%',
            bottom: '15%',
            top: '10%',
            containLabel: true,
            width: '80%', /* 增大grid的width属性值，可根据实际情况调整占比 */
            height: '70%' /* 增大grid的height属性值，可根据实际情况调整占比 */
        },
  legend: {
    top: 'bottom',
    textStyle: {
      color: '#ffffff' 
    }
  },
  toolbox: {
    show: true,
    feature: {
      mark: { show: true },
      dataView: { show: true, readOnly: false },
      restore: { show: true },
      saveAsImage: { show: true }
      
    }
  },
  series: [
    {
      name: 'Nightingale Chart',
      type: 'pie',
      radius: [50, 100],
      center: ['50%', '50%'],
      roseType: 'area',
      itemStyle: {
        borderRadius: 2
      },
      label: {
      show: true,  // 显示标签
      position: 'center',  // 标签位置，可以是 'inside', 'outside', 'center' 等
      formatter: '{b}: {c} ({d}%)'  // 标签内容格式，{b} 是数据项名称，{c} 是数值，{d} 是百分比
    },
      labelLine: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      data: [
      { value: y[4], name: x[4], label: { show: true } },
      { value: y[0], name: x[0], label: { show: true } },
      { value: y[3], name: x[3], label: { show: true } },
      { value: y[5], name: x[5], label: { show: true } },
      { value: y[2], name: x[2], label: { show: true } },
      { value: y[1], name: x[1], label: { show: true } },
    ]
    }
  ]
};

      option && myChart.setOption(option);
  }
  
  //组件挂载成功
  onMounted(function () {
      //发起axios异步请求，获取数据
      request({
          url: '/produce-api/queryAllpricenum',  // 配置的代理请求会拦截
          method: 'get'
      }).then(res => {
        console.log(res.data.data);
          chartsInit(res.data.data)
      }).catch((error) =>
          console.log(error))
  })
  
  </script>
  <style scoped>
  .cls1{
    width: 100%;
    height: 100%;
  }
  </style>